﻿<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <meta http-equiv="Content-Language" content="zh-CN"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="shop">
    <meta name="author" content="letsun">

    <title>注册</title>

    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="../plugs/fontAwesome/4.6.3/css/font-awesome.min.css"/>
    <link rel="stylesheet" type="text/css" href="../css/jquery.gritter.css"/>
    <link rel="stylesheet" type="text/css" href="../css/bootstrap-sticky-footer.css"/>
    <link rel="stylesheet" type="text/css" href="../css/bootstrap-fix.css"/>
    <link rel="stylesheet" type="text/css" href="../css/foot.css"/>
    <link rel="stylesheet" type="text/css" href="../css/center.css"/>

    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/jquery.gritter.min.js"></script>
    <script src="../js/jquery.gritter.min.extend.js"></script>

    <style>
        .easebuy-m .smt {
            font-size: 14px;
            min-height: 300px;
            height: auto;
        }

        .mt .title {
            font-size: 16px;
            font-weight: 900;
            padding: 10px;
            border-left: 3px solid #FF6666;
        }

        #edit-cont .item .label {
            float: none;
            display: block;
            vertical-align: middle;
            color: #999;
            text-align: left;
        }

        .item span.label {
            height: 30px;
            line-height: 18px;
            padding: 6px 0;
            width: 100px;
        }

        #edit-cont .item .error-msg {
            color: #c00;
            line-height: 32px;
        }

        #edit-cont .item .text {
            height: 30px;
            line-height: 18px;
            padding: 6px;
            width: 220px;
            margin-right: 5px;
            vertical-align: middle;
            border: 1px solid #ccc;
        }

        #edit-cont .item .text1 {
            width: 484px;
        }

        #edit-cont em {
            padding-right: 5px;
            color: #e4393c;
        }

        #edit-cont .item .sele {
            width: auto;
            margin-right: 10px;
            line-height: 18px;
            border: 1px solid #ccc;
            padding: 5px;
            float: none;
        }

        .form_group {

        }

        .form_item {
            width: 600px;
            margin: auto;
            height: 60px;
        }

        .form_group .form_item label {
            float: left;
            width: 150px;
            text-align: right;
            padding: 0px 20px;
            height: 50px;
            line-height: 50px;
            color: #333;
        }

        .form_group .form_item p {
            float: left;
            height: 50px;
            line-height: 50px;
            font-size: 12px;
            color: #c40000 !important;

        }

        .form_group .form_item span {
            padding: 5px;
            color: #c40000 !important;
            font-weight: 900;
        }

        .form_group .form_item .tex_input {
            float: left;
            width: 200px;
            height: 40px;
            margin: 5px 10px;
            padding: 0px 10px;
            text-align: left;
            border-radius: 5px;
            border: 1px solid #CCC;
            font-size: 16px;
        }

        .form_group .form_item .tex_code {
            float: left;
            width: 90px;
            height: 40px;
            margin: 5px 10px;
            padding: 0px 10px;
            text-align: left;
            border-radius: 5px;
            border: 1px solid #CCC;
            font-size: 16px;
        }

        .form_group .form_item .btn_code {
            float: left;
            width: 95px;
            height: 40px;
            margin: 5px;
            padding: 0px 5px;
            text-align: center;
            border-radius: 34px;
            border: none;
            color: #FFF;
            background: #FF9900;
        }

        .form_group .form_item .btn_submit {
            width: 240px;
            height: 44px;
            text-align: center;
            margin: auto;
            background: #0099cc;
            border: none;
            color: #FFF;
            font-size: 16px;
            font-weight: 900;
            border-radius: 30px;
        }

        .form_group .form_item .message_error {
            float: left;
            width: 200px;
            height: 40px;
            line-height: 40px;
            padding: 0px 10px;
            color: #c40000 !important;
        }

        .form_group .form_item .message_error span {
            padding-left: 10px;
        }

        .form_title {
            height: 55px;
            line-height: 50px;
            padding: 10px 0px;
            font-size: 16px;
            font-weight: 700;
            border-bottom: 2px solid #CCC;
            color: #666;
            margin-bottom: 20px;
        }

        .form_title span {
            border-left: 3px solid #FF6666;
            padding-left: 20px;
            color: #333;
            font-size: 18px;
        }


    </style>
</head>

<body>
<nav class="navbar navbar-default navbar-static-top navbar-shortcut">
    <div class="container">
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right navbar-nav-jd">
                <li>
                    <a href="/shop-pc/login">[请登录]</a>
                </li>
                <li>
                    <a href="/shop-pc/reg">[免费注册]</a>
                </li>
                <li>
                    <a target="_blank" href="/shop-pc/manage/order">我的订单</a>
                </li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</nav>

<!--- 导航： begin -->
<div id="nav">
    <div class="w container">
        <!-- logo begin -->
        <div class="logo">
            <a href="/shop-pc/" target="_blank" class="fore1"></a>
            <a href="/shop-pc/setting/profile" target="_self" class="fore2">我的淘惠帮</a>
            <a href="/shop-pc/" target="_blank" class="fore3">返回淘惠帮</a>
        </div>
        <!-- logo end -->

        <div class="pull-right">
            <form class="navbar-form navbar-left navbar-form-jd" role="search" action="/shop-pc/goods/search">
                <div class="form-group">
                    <input type="text" class="form-control" name="search_CN_title" placeholder="水果">
                </div>
                <button type="submit" class="btn btn-default">搜索</button>
                <a href="/shop-pc/cart" class="btn btn-default">购物车</a>
            </form>

        </div>
    </div>
</div>
<!--- 导航： end -->

<!-- container begin -->
<div id="container">
    <div class="w">
        <div id="content">

            <div style="width:100%;min-height:500px;background:#eee;padding:20px;">
                <div style="width:100%;min-height:300px;">

                    <form class="form-horizontal" id="validation-form" action="/shop-pc/reg" method="post">
                        <h6 class="form_title"><span>注册 </span></h6>
                        <div class="form_group">
                            <div class="form_item">
                                <label><span>*</span>会员账号</label>
                                <input id="username" name="username" class="tex_input" value=""/>
                            </div>

                            <div class="form_item">
                                <label><span>*</span>密码</label>
                                <input id="password" name="password" type="password" class="tex_input" value=""/>
                            </div>

                            <div class="form_item">
                                <label><span>*</span>确认密码</label>
                                <input id="confirm_password" name="confirm_password" type="password" class="tex_input" value=""/>
                            </div>

                            <div class="form_item">
                                <label><span>*</span>验证码</label>
                                <input id="code-true" type="hidden" value=""/>
                                <input class="tex_code" id="random" name="random" value=""/>
                                <button class="btn_code">获取验证码</button>
                            </div>

                            <div class="form_item">
                                <label></label>
                                <p>这里需要通过手机接收短信验证码,验证您的身份.</p>
                            </div>

                            <div class="form_item" style="text-align:center">
                                <button id="regBtn" class="btn_submit">注册</button>
                            </div>
                        </div>
                    </form>

                </div>


            </div>
            <span class="clr"></span>
        </div>
    </div>
</div>
<!-- container end -->

<!--service: 服务  begin-->
<div class="service-area">
    <div class="slogen-panel">
        <ul>
            <li><a href="#"><img src="../images/b_1.png"> <h4>品质保证</h4>
                <p>货到付款</p></a></li>
            <li><a href="#"><img src="../images/b_2.png"> <h4>七天无理由退换</h4>
                <p>国免邮</p></a></li>
            <li><a href="#"><img src="../images/b_3.png"> <h4>特色服务体验</h4>
                <p>自营冷链全国配送</p></a></li>
            <li><a href="#"><img src="../images/b_4.png"> <h4>有机农场</h4>
                <p>新蔬直供</p></a></li>
            <li><a href="#"><img src="../images/b_4.png"> <h4>帮助中心</h4>
                <p>国免邮</p></a></li>
        </ul>
    </div>

    <div class="service-panel">

        <dl class="service-item cot5">
            <dt>食品安全</dt>
            <dd>
                <!-- 遍历父节点为pid的全部节点 -->
                <div><a href="http://www.sxmmd.com/help/2">有机农场</a></div>
                <div><a href="http://www.sxmmd.com/help/3">采购标准</a></div>
                <div><a href="/shop-pc/help/4">食品信息公开透明</a></div>
                <div><a href="/shop-pc/help/5">透明社区经营理念</a></div>
                <div><a href="/shop-pc/help/6">我们的资质</a></div>
            </dd>
        </dl>


        <dl class="service-item cot5">
            <dt>新手教程</dt>
            <dd>
                <!-- 遍历父节点为pid的全部节点 -->
                <div><a href="/shop-pc/help/8">购物流程</a></div>
                <div><a href="/shop-pc/help/9">注册登录</a></div>
                <div><a href="/shop-pc/help/10">账户充值</a></div>
                <div><a href="/shop-pc/help/11">如何提货</a></div>
                <div><a href="/shop-pc/help/12">会员政策</a></div>
            </dd>
        </dl>


        <dl class="service-item cot5">
            <dt>配送方式</dt>
            <dd>
                <!-- 遍历父节点为pid的全部节点 -->
                <div><a href="/shop-pc/help/14">自营全程冷链配送</a></div>
                <div><a href="/shop-pc/help/15">配送范围</a></div>
                <div><a href="/shop-pc/help/16">运费标准</a></div>
            </dd>
        </dl>


        <dl class="service-item cot5">
            <dt>支付方式</dt>
            <dd>
                <!-- 遍历父节点为pid的全部节点 -->
                <div><a href="/shop-pc/help/18">货到付款</a></div>
                <div><a href="/shop-pc/help/19">在线支付</a></div>
                <div><a href="/shop-pc/help/20">账户余额支付</a></div>
                <div><a href="/shop-pc/help/21">退款说明</a></div>
                <div><a href="/shop-pc/help/22">多种福利卡</a></div>
            </dd>
        </dl>


        <dl class="service-item cot5">
            <dt>售后服务</dt>
            <dd>
                <!-- 遍历父节点为pid的全部节点 -->
                <div><a href="/shop-pc/help/24">退换货政策</a></div>
                <div><a href="/shop-pc/help/25">退换货流程</a></div>
                <div><a href="/shop-pc/help/26">发票制度</a></div>
                <div><a href="/shop-pc/help/27">投诉建议</a></div>
            </dd>
        </dl>


        <dl class="service-item cot5">
            <dt>帮助信息</dt>
            <dd>
                <!-- 遍历父节点为pid的全部节点 -->
                <div><a href="/shop-pc/help/29">安全食品采购指南</a></div>
                <div><a href="/shop-pc/help/30">常见问题</a></div>
                <div><a href="/shop-pc/help/31">电子优惠券的使用</a></div>
                <div><a href="/shop-pc/help/32">礼品卡</a></div>
            </dd>
        </dl>


    </div>
</div>
<!--service: 服务 end -->

<!-- footer:页脚  begin -->
<div class="footer">
    <div class="foot-panel">
        <div style="float:left;width:70%;text-align:right;">
            <p>免费热线：400-168-9979</p>
            <p>电子邮箱：bj@letsun.com.cn</p>
            <p>Copyright&nbsp;©&nbsp;2015-2016 立信创源 &nbsp;&nbsp;ww.letsun.com.cn &nbsp;版权所有</p>
            <p>Power by 粤ICP备13083109号</p>
        </div>
        <div style="float:right;width:30%;text-align:center;">
            <img src="../images/down_m.png" style="width:100px;height:100px;"/>
            <img src="../images/weixian_er.png" style="width:100px;height:100px;"/>
        </div>
    </div>
</div>
<!-- footer:页脚  end -->

<script type="text/javascript">
    var $path = "/shop-pc";
</script>

<script src="../js/jquery.validate.min.js"></script>
<script src="../js/messages_zh.min.js"></script>
<script>


    $('#validation-form').validate({
        errorElement: 'div',
        errorClass: 'message_error',
        focusInvalid: false,
        rules: {
            username: "required",
            password: {
                required: true,
                minlength: 6
            },
            confirm_password: {
                required: true,
                equalTo: "#password"
            },
            random: {
                required: true,
                minlength: 6,
                equalTo: "#code-true"
            }
        },
        messages: {

            username: "<span>*</span>请输入姓名",

            password: {
                required: "<span>*</span>请输入密码",
                minlength: "<span>*</span>密码不能少于6个字"
            },
            confirm_password: {
                required: "<span>*</span>请输入确认密码",
                equalTo: "<span>*</span>两次输入密码不一致不一致"
            },
            random: {
                required: "<span>*</span>请输入验码",
                minlength: "<span>*</span>确验码不正确",
                equalTo: "<span>*</span>确验码不正确"
            }
        },


        highlight: function (e) {
            $(e).closest('.form-group').removeClass('has-info').addClass('has-error');
        },

        success: function (e) {
            $(e).closest('.form-group').removeClass('has-error');//.addClass('has-info');
            $(e).remove();
        },

        errorPlacement: function (error, element) {
            if (element.is('input[type=checkbox]') || element.is('input[type=radio]')) {
                var controls = element.closest('div[class*="col-"]');
                if (controls.find(':checkbox,:radio').length > 1) controls.append(error);
                else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
            }
            else if (element.is('.select2')) {
                error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));
            }
            else if (element.is('.chosen-select')) {
                error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)'));
            }

            else error.appendTo(element.parent());
        },

        submitHandler: function (form) {
            //屏蔽插件提交,使用页面ajax提交
            //form.submit();
        },
        invalidHandler: function (form) {
        }
    });


    /* ---------------- 计时器 ---------------- */
    var count = 60;
    var timmer;
    function timeOut() {
        count--;
        if (count > 0) {
            $('.btn_code').attr("disabled", "disabled")
            $('.btn_code').text('(' + count + ')重新获取');
            timmer = setTimeout(timeOut, 1000);
        } else {
            count = 60;
            clearTimeout(timmer);
            $('.btn_code').removeAttr("disabled");
            $('.btn_code').text("获取验证码");
        }
    }


    /* ---------------- 获取验证码 ---------------- */
    function getCode(tel) {
        $.ajax({
            type: "post",
            dataType: "json",
            data: {
                "username": tel
            },
            url: "/shop-pc/message/send",
            success: function (result) {
                if ('200' == result.code) {
                    //为了验证码前端验证
                    $('#code-true').val(result.result);
                    $('.tex_code').val(result.result);
                    alertSuccess('验证码已发送，请注意查收');
                } else {
                    alertDanger(result.msg);
                }
            }, error: function (XMLHttpRequest, textStatus, errorThrown) {
                alertDanger('网络异常');
            }
        })
    }

    /* ---------------- 注册 ---------------- */
    function register() {
        $.ajax({
            type: "post",
            url: "/shop-pc/reg",
            data: $("#validation-form").serialize(),
            success: function (result) {
                if (result.code == 200) {
                    alertSuccess("注册成功");
                    window.location.href = "/shop-pc/";
                } else {
                    alertDanger(result.msg);
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alertDanger('网络异常');
            }
        })
    }

    /* ---------------- 验证用户名为手机号 ---------------- */
    function validation(tel) {
        reg = /^1\d{10}$/;
        return reg.test(tel);
    }

    /* ---------------- jquery init ---------------- */
    $(function () {
        //点击获取验证码
        $('.btn_code').on('click', function () {

            var tel = $('#username').val();
            // 验证电话号码
            if (validation(tel)) {
                //获取验证码
                getCode(tel);
                //启动计时器
                timeOut();
            } else {
                alertSuccess('请输入正确的手机号码');
            }
        });

        $("#regBtn").on('click', function () {

            //---------判断手机号是否唯一--------
            var flag = false;//是否唯一
            $.ajax({
                type: "post",
                url: "/shop-pc/unique/username",
                async: false,
                data: "username=" + $("#username").val(),
                success: function (data) {
                    if (data) {
                        flag = true;
                    }
                }
            })
            if (!flag) {
                alertSuccess("该手机号已经注册");
                return false;
            }

            //---------验证表单信息,没问题执行注册--------
            if ($('#validation-form').valid()) {
                register();
            }
        });
    })
</script>
</body>
</html>
